<template>
  <div>
    <entryTitle></entryTitle>
    <swiper></swiper>
    <coupon v-if="shows"></coupon>
    <!-- 瀑布流 -->
      <div class="index_content">
          <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="show_card">
              <div class = "index_content_title">热门游记</div>
              <van-cell @click = "show_detail(item.mid)" class="list" v-for = "(item, i) of show_data" :key = "i">
                <van-image class="img"
                        lazy-load
                        :src="item.image"
                        />
                  <div class="con">{{item.title}}</div>
                  <div class="title">{{item.lable}}</div>

              </van-cell>
          </van-list>
          
      </div>
  </div>
</template>

<script>

import entryTitle from '../commonality/entry_title.vue'
import coupon from '../commonality/coupon.vue'
import swiper from '../commonality/swiper.vue'

export default {
  name: 'WorkspaceJsonHome',
  components: {
    entryTitle,
    coupon,
    swiper
   
  
    
  },

  data() {
    return {
      page: 1,
      show_data: [],
      finished: false,
      loading: false,
      shows:true
    };
  },

  mounted() {
    if(sessionStorage.getItem('wmxz')){
      this.shows = false
    }else{
      this.shows = true
    }
  },

  methods: {
    show_card() {                //触底加载
      this.$toast.loading({           //toast加载提示
        message: '加载中...',
        forbidClick: true,
      });
      this.$http.get('/community', {params: {mid: this.page}}).then(result => {         //初始页面加载瀑布流数据
        this.show_data.push(...result.data.data)
        this.page += 1;
        this.loading = false;           //加载状态结束
        this.$toast.clear();            //数据请求完毕关闭提示 
        if(result.data.data.length == 0) {
          this.finished = true;
          this.$toast.success('到底了');           //toast加载提示
            
        }
      })
    },
    show_detail(mid) {
      this.$router.push('/home_detail?mid=' + mid)
    }
  },
};
</script>

<style lang="scss" scoped>
  .index_content{   
    margin-top: 20px;
    padding: 10px 8px;
    box-sizing: border-box;
    column-count: 2;
    border-top: 1px solid #f4f4f4;

    
    .index_content_title {
      // color: #646566;
      color: #41c1ec;
      font-size: 22px;
      padding: 5px 0 20px 0;
      text-align: center;
    }
    .list {
        break-inside: avoid;
        overflow: hidden;
        // border: 1px solid #f4f4f4;
        color: #646566;
        font-size: 14px;
        border-radius: 9px;
        border: 1px solid #e0e0e0;
    
        >.img {
            width: 100%;
            height: 108px;
        }

        .title {
          line-height: 1.5;
          color: #999;
            margin-left: 15rpx;
            margin-right: 6rpx;
            padding-left: 7px;
            height: 10  0px;
            overflow: hidden;
            font-size: 12px;
            /* text-overflow: ellipsis; */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            
        }
        .con{
            // padding-top: 10px;
            padding-left: 4px;
            // padding-bottom: 10px;
            margin-bottom: 10px;
            margin-top: 20rpx;
            display: flex;
            font-size: 14px;
            align-items: center;
            justify-content: space-between;
            color: #41c1ec;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    }
  } 

</style>
<style>
.index_content .van-cell {
  padding: 0;
  background: none;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
</style>